<template>
    <div>
        <div class="operate center-flex-box" v-if="hasPermission('ADD_CHILD_AREA')">
            <div class="item">设置子区域</div>
            <el-select v-model="updateInfo.parentId" clearable placeholder="请选择父区域">
                <el-option
                    v-for="area in areas"
                    :key="area.id"
                    :label="area.name"
                    :value="area.id">
                </el-option>
            </el-select>
            <el-select v-model="updateInfo.childId" clearable placeholder="请选择子区域">
                <el-option
                    v-for="area in areas"
                    :key="area.id"
                    :label="area.name"
                    :value="area.id">
                </el-option>
            </el-select>
            <el-button class="item" @click="addChild">更新</el-button>
        </div>
        <area-tree-view ref="areaTree"></area-tree-view>
    </div>
</template>

<script>
    import AreaTreeView from '@/components/area/AreaTreeView'
    import { mapGetters, mapActions } from 'vuex'

    export default {
        name: 'childOpt',
        components: {
            AreaTreeView
        },
        data () {
            return {
                updateInfo: {
                    parentId: '',
                    childId: ''
                },
                areas: []
            }
        },
        mounted () {
            this.action(this.listAreaAction(), data => {
                this.areas = data.data
            })
        },
        computed: {
            ...mapGetters({
                hasPermission: 'user/hasPermission'
            })
        },
        methods: {
            ...mapActions({
                treeAction: 'area/tree',
                listAreaAction: 'area/listArea',
                addChildAreaAction: 'area/addChildArea'
            }),
            addChild () {
                this.action(this.addChildAreaAction(this.updateInfo), data => {
                    this.$message.success('更新成功')
                    this.$refs.areaTree.reload()
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../../../../style/scss';

    .operate {
        height: 60px;
        width: 90%;
        padding: 0 5%;

        .item {
            margin: 24px;
        }

        .input-with-select {
            width: 360px;
            background-color: #fff;

            .el-select {
                width: 100px;
            }
        }
    }
</style>
